<div class="clearfix power__ups">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-body text-center">
        <h2><%= device.name %></h2>
      </div>
    </div>
  </div>
  <div class="col-md-8 p-xs">
    <div class="mblock left">
      <div class="row">
        <div class="col-xs-3 p-r"></div>
        <div class="col-xs-9 p-l">
          <%=image_tag"power-ups2.jpg",width:"80%", height: "100%", id: 'ups_img'%>
          <!-- 左侧表格1 -->
          <div class="table-responsive table-left1">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th colspan="2" class="text-center">市电输入</th>
                </tr>
              </thead>
              <tbody>
                <% @points["市电输入"].each do |point| %>
                  <% unless exclude_points["市电输入"] && exclude_points["市电输入"].include?(point[0]) %>
                    <tr>
                      <td width="72%" align="center"><b><%= point[0] %></b></td>
                      <td align="center"><%= point[1] %></td>
                    </tr>
                  <% end %>
                <% end %>
              </tbody>
            </table>
          </div>
          <!-- 右侧表格 -->
          <% if @points["AC"].present? %>
            <div class="table-responsive table-right">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th colspan="2" class="text-center">UPS输出</th>
                  </tr>
                </thead>
                <tbody>
                  <% @points["AC"].each do |point| %>
                    <% unless exclude_points["AC"] && exclude_points["AC"].include?(point[0]) %>
                      <tr>
                        <td width="60%" align="center"><b><%= point[0] %></b></td>
                        <td align="center"><%= point[1] %></td>
                      </tr>
                    <% end %>
                  <% end %>
                </tbody>
              </table>
            </div>
          <% end %>
          <!-- 下部表格 -->
          <div class="table-responsive table-bottom">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th colspan="2" class="text-center">电池模块</th>
                </tr>
              </thead>
              <tbody>
                <% @points["电池模块"].each do |point| %>
                <% unless exclude_points["电池模块"] && exclude_points["电池模块"].include?(point[0]) %>
                <tr>
                  <td width="60%" align="center"><b><%= point[0] %></b></td>
                  <td align="center"><%= point[1] %></td>
                </tr>
                <% end %>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 p-xs">
    <!-- <div class="row">
      <div class="col-xs-12">
        <div class="mblock part-bar">
          <span class="text-muted">输出负载率</span>
          <div id="ups_bar"style="width: 100%;"></div>
        </div>
      </div>
    </div> -->
    <% if  @points["表格"].present? %>
      <div class="row">
        <div class="col-xs-12">
          <div class="mblock part-pie">
            <div id="ups_pie"style="width: 100%;"></div>
          </div>
        </div>
      </div>
    <% end %>

  </div>
  <% if @points["告警"].present? %>
    <div class="col-md-12">
      <div class="panel panel-default warn-info">
        <div class="panel-heading text-center"><h4>报警信息</h4></div>
        <div class="panel-body" style="height: 320px; overflow: auto;" >
          <% @points["告警"].keys.each_with_index do |key, index| %>
            <% if index % 4 == 0 %>
              <div class="air_d_grey col-sm-3" align="left">
            <% end %>
              <div class="info-row" style="overflow:hidden; margin:0; padding-bottom:0;">
                <span class="warning-name"><%= key %></span>
                <span class="warning-icon"><%= warning_status @points["告警"][key] %></span>
              </div>
            <% if index%4 == 3 %>
              </div>
            <% end %>
          <% end %>
        </div>
      </div>  
    </div>
  <% end %>
</div>

<script type="text/javascript">
  //设置3个模块的高度
  var left = document.body.clientHeight - 100;
  var r_t = left * 0.4 - 25;
  var r_b = left * 0.6 -25;
  $(".left").height(left);
  $(".part-bar").height(r_t);
  $("#ups_bar").height(r_t-20);
  $(".part-pie").height(r_b);
  $("#ups_pie").height(r_b);

  $("#ups_img").height(left-10);

  // 路径配置
  require.config({
    paths: {
      echarts: '/assets/echarts'
    }
  });

  // 条形图
  // require(
  //   [
  //   'echarts',
  //     'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
  //     ],
  //     function (bar) {
  //     // 基于准备好的dom，初始化echarts图表
  //     var upsBar = bar.init(document.getElementById('ups_bar'), 'macarons'); 

  //     var option = {
  //       grid : {
  //         y : 5,
  //         x2 : 5,
  //         y2 : 5,
  //         x : 5
  //       },
  //       tooltip : {
  //         trigger: 'axis'
  //       },
  //       xAxis : [
  //       {
  //         type : 'category',
  //         data : ['','','','','','','','','','','','','','','','','','','','','','','','']
  //       }
  //       ],
  //       yAxis : [
  //       {
  //         type : 'value'
  //       }
  //       ],
  //       series : [
  //       {
  //         name:'负载率',
  //         type:'bar',
  //         itemStyle:{
  //           normal:{
  //             color:'#00cae1'
  //           } 
  //         },
  //         data:[7.0, 16.9, 40.0, 12.2, 32.6, 20.0, 30.4, 18.6, 22.2, 3.3,2.0, 4.9, 7.0, 23.2, 23.2, 25.6, 76.7, 135.6, 25.6, 76.7, 32.6, 20.0, 6.4, 3.3],
  //       }
  //       ],
  //     };
  //     // 为echarts对象加载数据 
  //     upsBar.setOption(option); 
  //   }
  //   );
  <% if @points["表格"].present? %>
    // 环形图
    require(
      [
      'echarts',
      'echarts/chart/pie'
      ],
      function (pie) {
        // 基于准备好的dom，初始化echarts图表
        var upsPie = pie.init(document.getElementById('ups_pie')); 
        var labelTop = {
          normal : {
            label : {
              show : true,
              position : 'center',
              formatter : '{b}',
              textStyle: {
                baseline : 'top',
                color: '#7e7e7e',
                fontSize: 10
              }
            },
            labelLine : {
              show : false
            }
          }
        };
        var labelFromatter = {
          normal : {
            label : {
              formatter : function (params){
                return 100 - params.value + '%'
              },
              textStyle: {
                baseline : 'bottom',
                fontSize: 20
              }
            }
          },
        }
        var labelBottom = {
          normal : {
            color: '#eee',
            label : {
              show : true,
              position : 'center'
            },
            labelLine : {
              show : false
            }
          },
          emphasis: {
            color: 'rgba(0,0,0,0)'
          }
        };
        var radius = ['30%', '33%'];
        var option = {
          legend: {
            x : 'center',
            y : 'center',
            data:[]
          },
          series : [
            <% unless exclude_points["表格"] && exclude_points["表格"].include?("输入总视在功率") %>
              {
                type : 'pie',
                center : ['25%', '16.6%'],
                radius : radius,
                    x:'60%', // for funnel
                    itemStyle : labelFromatter,
                    data : [
                    {name:'other', value: <%= 100 - @points["表格"]["输入总视在功率"].to_i * 100 %>, itemStyle : labelBottom},
                    {name:'输入总视在功率', value: <%= @points["表格"]["输入总视在功率"].to_i * 100 %>,itemStyle : labelTop}
                    ]
              },
            <% end %>

            <% unless exclude_points["表格"] && exclude_points["表格"].include?("输出总视在功率") %>
              {
                type : 'pie',
                center : ['75%', '16.6%'],
                radius : radius,
                x:'80%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value: <%= 100 - @points["表格"]["输出总视在功率"].to_i * 100 %>, itemStyle : labelBottom},
                  {name:'输入总视在功率', value: <%= @points["表格"]["输出总视在功率"].to_i * 100 %>,itemStyle : labelTop}
                ]
              },
            <% end %>

            <% unless exclude_points["表格"] && exclude_points["表格"].include?("输入总有功") %>
              {
                type : 'pie',
                center : ['25%', '50%'],
                radius : radius,
                x:'60%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value: <%= 100 - @points["表格"]["输入总有功"].to_i * 100 %>, itemStyle : labelBottom},
                  {name:'输入总视在功率', value: <%= @points["表格"]["输入总有功"].to_i * 100 %>,itemStyle : labelTop}
                ]
              },
            <% end %>

            <% unless exclude_points["表格"] && exclude_points["表格"].include?("输出总有功") %>
              {
                type : 'pie',
                center : ['75%', '50%'],
                radius : radius,
                x:'80%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value: <%= 100 - @points["表格"]["输出总有功"].to_i * 100 %>, itemStyle : labelBottom},
                  {name:'输入总视在功率', value: <%= @points["表格"]["输出总有功"].to_i * 100 %>,itemStyle : labelTop}
                ]
              },
            <% end %>

            <% unless exclude_points["表格"] && exclude_points["表格"].include?("输入平均功率因数") %>
              {
                type : 'pie',
                center : ['25%', '83.3%'],
                radius : radius,
                x:'60%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value: <%= 100 - @points["表格"]["输入平均功率因数"].to_i * 100 %>, itemStyle : labelBottom},
                  {name:'输入总视在功率', value: <%= @points["表格"]["输入平均功率因数"].to_i * 100 %>,itemStyle : labelTop}
                ]
              },
            <% end %>

            <% unless exclude_points["表格"] && exclude_points["表格"].include?("输出平均功率因数") %>
              {
                type : 'pie',
                center : ['75%', '83.3%'],
                radius : radius,
                x:'80%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value: <%= 100 - @points["表格"]["输出平均功率因数"].to_i * 100 %>, itemStyle : labelBottom},
                  {name:'输入总视在功率', value: <%= @points["表格"]["输出平均功率因数"].to_i * 100 %>,itemStyle : labelTop}
                ]
              }
            <% end %>
            ]
          };
          upsPie.setOption(option); 
        }
        );
  <% end %>
</script>

